<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>书签搜索</title>
  <style>
    /* 全局样式和布局 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      padding: 15px;
      margin: 0;
      width: 500px; /* 固定的弹出窗口宽度 */
      height: 600px; /* 固定的弹出窗口高度 */
      box-sizing: border-box;
      background-color: #f4f5f7;
      color: #172b4d;
      display: flex;
      flex-direction: column;
    }

    /* 搜索输入框样式 */
    input#search {
      width: 100%;
      padding: 10px 15px;
      font-size: 16px;
      margin-bottom: 15px;
      border: 2px solid #dfe1e6;
      border-radius: 8px;
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* 输入框聚焦时的样式 */
    input#search:focus {
      outline: none;
      border-color: #4c9aff;
      box-shadow: 0 0 0 3px rgba(76, 154, 255, 0.25);
    }

    /* 结果列表样式 */
    ul#results {
      list-style: none;
      padding: 0;
      margin: 0;
      flex-grow: 1; /* 占据剩余空间 */
      overflow-y: auto; /* 超出部分滚动 */
      background-color: #ffffff;
      border-radius: 8px;
      border: 1px solid #dfe1e6;
    }

    /* 列表项样式 */
    li {
      margin: 0;
      border-bottom: 1px solid #f0f0f0;
    }
    
    li:last-child {
        border-bottom: none;
    }

    /* 链接样式 */
    a {
      display: block;
      padding: 12px 15px;
      text-decoration: none;
      color: #0052cc;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; /* 超长文本显示省略号 */
      transition: background-color 0.2s;
    }

    /* 链接悬停效果 */
    a:hover {
      background-color: #f0f6ff;
      color: #0041a3;
    }
    
    /* 键盘选中项的样式 */
    li.selected a {
      background-color: #e4f0ff;
      color: #0041a3;
    }
  </style>
</head>
<body>

  <!-- 搜索输入框 -->
  <input id="search" type="text" placeholder="🔍 搜索你的书签..." />
  
  <!-- 搜索结果列表 -->
  <ul id="results"></ul>

  <!-- 引入外部JavaScript文件 -->
  <script src="popup.js"></script>
</body>
</html>
